<template>
  <view class="page-container">
    <view class="register-wrapper">
      <view class="title-section">
        <text class="title">欢迎注册</text>
      </view>
      
      <view class="form-container">
        <view class="input-item">
          <input 
            type="text" 
            placeholder="请输入昵称" 
            v-model="nickname"
            class="input-field"
          />
        </view>
        
        <view class="input-item">
          <input 
            type="password" 
            placeholder="请设置密码" 
            v-model="password"
            class="input-field"
          />
        </view>
        
        <view class="input-item phone-item">
          <view class="country-code">+86</view>
          <input 
            type="number" 
            placeholder="请输入手机号" 
            v-model="phone"
            class="input-field phone-input"
          />
        </view>
        
        <view class="agreement-item">
          <checkbox v-model="isAgree" class="agreement-checkbox" />
          <view class="agreement-text">
            <text>已阅读并同意</text>
            
          </view>
        </view>
        
        <view class="btn-container">
          <button 
            class="register-btn" 
            @click="handleRegister"
            :disabled="isSubmitting"
          >
            {{ isSubmitting ? '注册中...' : '立即注册' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nickname: '',
      password: '',
      phone: '',
      isAgree: false,
      isSubmitting: false
    }
  },
  methods: {
   
    handleRegister() {
      if (this.isSubmitting) return;
      
      if (!this.nickname.trim()) {
        this.showToast('请输入昵称');
        return;
      }
      
      if (!this.password || this.password.length < 6) {
        this.showToast('密码长度不能少于6位');
        return;
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.showToast('请输入正确的手机号');
        return;
      }
      
      if (!this.isAgree==null) {
        this.showToast('请阅读并同意相关协议');
        return;
      }
      
      this.submitRegister();
	  
	  // 开启注册流程
	  uni.showLoading({
	  	title:'注册中.....',
		mask:true
	  }),
	  //数据提交到服务器
	  uniCloud.callfuction({
	  	name:'addUser',
		data:{
			'name':this.nickname,
			'password':this.password,
			'phone':this.phone
		},
		success:(msg)=>{
			console.log("addUser CallBack" +msg);
		}
	  })
    },
    
	
	
	
	showToast(title) {
	      uni.showToast({ title, icon: 'none', duration: 2000 });
	    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 100rpx;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.register-wrapper {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 500rpx;
  padding: 60rpx 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.title-section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.input-item {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
}

.phone-item {
  padding-left: 0;
}

.country-code {
  width: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  border-right: 2rpx solid #e5e5e5;
}

.input-field {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  padding: 0 10rpx;
}

.phone-input {
  padding-left: 24rpx;
}

.agreement-item {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.agreement-checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}

.agreement-text {
  display: flex;
  flex-wrap: wrap;
  font-size: 24rpx;
  color: #666;
}



.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.register-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #2c66e5;
  color: #fff;
  font-size: 32rpx;
  border-radius: 8rpx;
  margin: 0;
  padding: 0;
}

.register-btn:disabled {
  background-color: #a0cfff;
}
</style>
